import React, {} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Platform
} from 'react-native';

import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import {DateUtils} from '../../utils/Utils';
import TImage from '../../components/TImage';
import BaseItem from '../common/BaseItem';
import ToastUtils from '../../common/ToastUtils';
import WH_Constants from './WH_Constants';
import PostRequestLikeAction from '../../actions/post/PostRequestLikeAction';

const NUM_IMAGES = [require("../../../resource/images/common/1.png"), require("../../../resource/images/common/2.png"),
  require("../../../resource/images/common/3.png"),require("../../../resource/images/common/4.png"),
  require("../../../resource/images/common/5.png"),require("../../../resource/images/common/6.png"),
  require("../../../resource/images/common/7.png"),require("../../../resource/images/common/8.png"),
  require("../../../resource/images/common/9.png"),require("../../../resource/images/common/10.png")];

export default class WH_PostJDZItemView extends BaseItem {
  constructor(props) {
    super(props);
    this.state={
      readers_num:this.props.data.readers_num,
      likers_num:this.props.data.likers_num 
    };
  }
  componentWillUpdate(nextProps, nextState) {
    if (nextProps.data.likers_num!==nextState.likers_num) {
      nextState.likers_num=nextProps.data.likers_num||0;
    }
    if (nextProps.data.readers_num!==nextState.readers_num) {
      nextState.readers_num=nextProps.data.readers_num||0;
    }
    if(nextState.needRefresh || nextState.updateByLike) {
      nextState.needRefresh = false;
      nextState.updateByLike = false;
      this.props.refRefresh&&this.props.refRefresh();
      if(nextState.statusText != "") {
        ToastUtils.show(nextState.statusText);
        nextState.statusText = "";
      }
    }
  }
  render() {
    return(
      <TouchableOpacity
        style={{flexDirection:"column",
            paddingLeft:SizeUtils.translateDesignWidthToCode(30),
            paddingRight:SizeUtils.translateDesignWidthToCode(30),
            paddingBottom:SizeUtils.translateDesignHeightToCode(16),
            paddingTop:SizeUtils.translateDesignHeightToCode(25),
            borderColor:"#eeeeee",
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3)}}
          onPress={this._onPressItem.bind(this)}>
          {this._renderTitle()}
          {this._renderContent()}
          {this._renderBottomText()}
          {this._renderJiangli()}
      </TouchableOpacity>
    )
  }

  _onPressItem() {
    if (this.props.data.content) {
      if(this.props.data.content.indexOf("https://mp.weixin.qq.com") === 0 ||
        this.props.data.content.indexOf("http://mp.weixin.qq.com") === 0) {
        this.gotoPage(Config.pages.chuangxin_web, {url:this.props.data.content, data:this.props.data});
      }
      else {
        this.gotoPage(Config.pages.wh_content, {pingType:this.props.pingType||0,isPing:this.props.isPing||false,isZhuanjia:this.props.isZhuanjia,...this.props.data});
      }
    }else{
      this.gotoPage(Config.pages.wh_content, {pingType:this.props.pingType||0,isPing:this.props.isPing||false,isZhuanjia:this.props.isZhuanjia,chageBrowse:this.chageBrowse.bind(this),...this.props.data});
    } 
  }
  chageBrowse(read,like){
    this.setState({
      readers_num:read,
      likers_num:like
    });
  }
  _sendLikeAction() {
    new PostRequestLikeAction().call(this, this.props.data);
  }
  _tipNumber(data){
    if (data.tip_year>0) {
      return data.tip_year;
    }
    if (data.tip_month>0) {
      return data.tip_month;
    }
    return 0;
  }
  _renderTitle() {
    return(
      <View style={{}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32), color:"#333333",
            fontWeight:"bold"}} numberOfLines={1}>
          {this._getTitle()}
        </Text>
      </View>
    )
  }
  _renderJiangli(){
    const tip  =this._tipNumber(this.props.data);
    if (tip<1) {
      return(<View />)
    }
    return(
      <TImage source={require("../../../resource/images/workhard/jiangli.png")}
            style={{position:"absolute",top:14,right:30,width:64, height:58}}/>
    );
  }
  _getTitle() {
    let left = "";
    return left + this.props.data.title;
  }
  _getConentTitle(){
    if (WH_Constants.getTypeDataBySubTag(this.props.data.sub_tag)) {
      return WH_Constants.getTypeDataBySubTag(this.props.data.sub_tag);
    }
    return "";
  }
  _getShowtTop() {
    return this.props.data.top == 1 && this.props.showTop === true;
  }

  _getShowNum() {
    return this.props.data.tag == 1 && this.props.showNum === true && this.props.index < 10;
  }
  _renderImage() {
    if(this.props.data.image_urls && this.props.data.image_urls != null) {
      let image_url = this.props.data.image_urls.length > 0 ? this.props.data.image_urls[0] : "";
      return(
        <View style={{
            paddingRight:SizeUtils.translateDesignHeightToCode(26)}}>
          <TImage source={{uri:image_url}} isMini={true}
            style={{width:180, height:140}}/>
        </View>
      )
    }
  }
  //标签
  _renderContentItemTagPer(tag) {
    return (
      <View style={{backgroundColor:'#fff', borderRadius:SizeUtils.translateDesignNumToCode(14),
      height:SizeUtils.translateDesignHeightToCode(38),
         borderColor:'#ee3535', borderWidth:0.5, marginRight:SizeUtils.translateDesignWidthToCode(10),
          flexDirection:"row", justifyContent:"center", alignItems:"center"}}>
        <Text style={{color:'#ee3535', fontSize:SizeUtils.translateFontSizeToCode(26),
         textAlign:"center",
          marginLeft:SizeUtils.translateDesignWidthToCode(14), marginRight:SizeUtils.translateDesignWidthToCode(14)}}>
         {tag}
       </Text>
      </View>
    )
  }
  _renderContent() {
    return(<View style={{flexDirection:'row',
          height:SizeUtils.translateDesignHeightToCode(80),
          alignItems: 'center',}}>
          {this._renderContentItemTagPer(this._getConentTitle())}
          {this.props.data.official===1?this._renderContentItemTagPer('已回复'):null}
      </View>
    );
  }
  _renderBottomText() {
    if(this.props.data.title) {
      return(
        <View style={{flex:1,flexDirection:'row',alignItems: 'center',marginTop:SizeUtils.translateDesignHeightToCode(30)}} >
          <TImage source={require("../../../resource/images/home/kan.png")} 
            style={{width:28,height:28,marginRight:4}}/>
          <Text style={{marginRight:Platform.OS === "android"?6:0,marginLeft:Platform.OS === "android"?3:0,fontSize:SizeUtils.translateFontSizeToCode(28), color:"#999999" }}>
            {this.state.readers_num}
          </Text>
          <TImage source={require("../../../resource/images/home/jianyi.png")} 
            style={{marginLeft:10,width:28,height:28,marginRight:4}}/>
          <Text style={{marginRight:Platform.OS === "android"?6:0,marginLeft:Platform.OS === "android"?3:0,fontSize:SizeUtils.translateFontSizeToCode(28), color:"#999999" }}>
            {this.props.data.comments_num}
          </Text>
          <TouchableOpacity style={{flexDirection:'row',alignItems: 'center',}} onPress={()=>{this._sendLikeAction();}}>
            <TImage source={require("../../../resource/images/home/zan.png")} 
              style={{marginLeft:10,width:28,height:28,marginRight:4}}/>
            <Text style={{marginLeft:Platform.OS === "android"?3:0,fontSize:SizeUtils.translateFontSizeToCode(28), color:"#999999" }}>
              {this.state.likers_num }
            </Text>
          </TouchableOpacity>
          <Text style={{marginLeft:20,fontSize:SizeUtils.translateFontSizeToCode(28), color:"#999999", }}>
            {"  " + DateUtils.formatDate3(this.props.data.posted_at)}
          </Text>
        </View>
      )
    }
  }
}